import React from 'react';
import * as lodash from 'lodash';
import {Button, Checkbox, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaSelect, WeaBrowser} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EField_New from './base/EField_New'
import EPicturesSettings from './base/EPicturesSettings';

// 公司新闻，数据来源
class Content_news_DataSource extends React.Component {
    state = {
        id: this.props.tabData.id,
        title: this.props.tabData.title || '',
        newsCenter: this.props.tabData.newsCenter,
        newsCentersNames: this.props.tabData.newsCentersNames,
        eFieldNewDataSource: this.props.tabData.eFieldNewDataSource || this.props.tabNew.eFieldNewDataSource,
        eFieldNewUsedKeys: this.props.tabData.eFieldNewUsedKeys || [],
        eFieldNewVisible: false,
        eShowMoudle: this.props.tabData.eShowMoudle || '1',
        pictureWidth: this.props.tabData.pictureWidth,
        pictureHeight: this.props.tabData.pictureHeight,
        widthUnit: this.props.tabData.widthUnit || 'px',
        heightUnit: this.props.tabData.heightUnit || 'px',
        autoHeight: this.props.tabData.autoHeight || false,
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onDocSourceTypeChange = this.onDocSourceTypeChange.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onChangeSize = this.onChangeSize.bind(this);
    }

    render() {
        const { title, newsCenter, newsCentersNames, eFieldNewDataSource, eFieldNewUsedKeys, eFieldNewVisible, eShowMoudle = '1', pictureWidth = '120', pictureHeight = '108',
            widthUnit, heightUnit, autoHeight } = this.state;
        let authoHeight = (autoHeight ? "portal-news-authoheight" : '') ;
        const { tabNew } = this.props;
        const { showMode　={} } = tabNew;
        let EFieldNew = <div></div>;
        if (eFieldNewVisible) {
            const eFieldNewProps = {
                eFieldNewDataSource: _.cloneDeep(eFieldNewDataSource),
                eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
                onOk: (data) => {
                    this.setState({
                        eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                        eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                        eFieldNewVisible: false
                    });
                },
                onCancel: () => {
                    this.setState({
                        eFieldNewVisible: false
                    });
                }
            };
            EFieldNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@wlyhv8`} {...eFieldNewProps}/>
        }
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].key) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].name);
                }
            }
        }
        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4nil9r`}
                className="portal-esetting-dialog"
                visible={true}
                title={getLabel(19480, '内容设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 660, height: 507}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@cu31v4`} title={getLabel(33396, '设置项')} needTigger={true} showGroup={true}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@76625u`} label={getLabel(24986, '标题')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@nqurz3`} inputType="multilang" isBase64={true} value={title} viewAttr={3} onChange={value => this.setState({title: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dot5dx`} label={getLabel(22919, '新闻来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@62cgoa`}
                            type={'docnews'}
                            isSingle={true}
                            replaceDatas={newsCentersNames}
                            onChange={(ids, names, datas) => this.setState({newsCenter: ids, newsCentersNames: datas})}
                            layout={document.body}
                        />
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@juhyyb`} label={getLabel(21653, '显示方式')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@jh0zai`} value={eShowMoudle} options={showMode.options || []} style={{width: '100px'}} onChange={value => this.setState({eShowMoudle: value})}/>
                    </WeaFormItem>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lahkqz`} label={getLabel(19495, '显示字段')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                        {EFieldNew}
                        <div style={{height: '30px', lineHeight: '23px'}}>
                            <i className="icon-coms-Flow-setting portal-esetting-btn" onClick={() => this.setState({eFieldNewVisible: true})}/>
                            <span>{eFieldNewUsedNames.join('，')}</span>
                        </div>
                    </WeaFormItem>
                    {
                        this.state.eShowMoudle == '1' || this.state.eShowMoudle == '' ? ''
                            : <EPicturesSettings ecId={`${this && this.props && this.props.ecId || ''}_EPicturesSettings@ml0omu`} onChangeSize={this.onChangeSize} pictureWidth={pictureWidth} widthUnit={widthUnit} authoHeight={authoHeight} pictureHeight={pictureHeight} heightUnit={heightUnit} autoHeight={autoHeight}/>
                    }
                </WeaSearchGroup>
            </WeaDialog>

        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1ztu1g`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7biso2`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onChangeSize(string,value){
        this.setState({
            [string]: value
        })
    }

    onDocSourceTypeChange(value, checked) {
        const {docSourceType} = this.state;
        const docSourceTypeArr = docSourceType.split(',');

        lodash.pull(docSourceTypeArr, value);
        if (checked) {
            docSourceTypeArr.push(value);
        }

        this.setState({docSourceType: docSourceTypeArr.join(',')});
    }

    onOk() {
        if (!this.state.title) {
            message.warning(getLabel(15859, '必要信息不完整！'));
        } else {
            this.props.onOk(this.state);
        }
    }

    onCancel() {
        this.props.onCancel();
    }
}

export default Content_news_DataSource;
